<!--
@fucntion: 收费项目基本信息
-->
<template>
<div class="module-basic-Charges">
  <el-row style="height:100%;">
    <el-col style="height:100%;">
      <table-panel 
      :name="'收费项目基本信息'" 
      :columns="ChargesColumns" 
      :tableData="ChargesData" 
      :showRowNumber="false" 
      :multiSelection="true"
      :inputLabelSearchMode="true"
      :canCreate="authorities.create" 
      :canDeleteAll="authorities.DeleteAll" 
      :canEdit="authorities.edit" 
      :canDelete="authorities.delete"
      :canExport="authorities.export"
      :canImport="authorities.Import"
      :action="actionUrl"
      :importFields="importField"
      @table-upload="onUpload"
      :currentPage="ChargesCurrentPage" 
      :totalNum="ChargesTotalNum" 
      :canDownTemplate="authorities.DownTemplate"
      @page-change="onPageChange('Charges',$event)" 
      :pageSize="pageSize"
      @table-searching="onSearching('Charges',$event)"
      @table-create="onCreate('Charges',$event)" 
      @table-DeleteAll="onDeleteAll('Charges',$event)" 
      @table-edit="onEdit('Charges', $event)"
      @table-delete="onDelete('Charges',$event)" 
      @table-export="onExport('Charges',$event)"
      @table-downTemplate="canDownTemplate('Charges',$event)"
      @selection-change="onSelectionChange('Charges',$event)">
      </table-panel>
      <el-col>
        <el-dialog
          title="收费项目信息"
          :visible.sync="SwitchingPoint"
          width="60%"
        >
          <el-card style="background-color: #DCDFE6;"> 
            <el-button type="warning" plain size="mini" style="float:right" 
              @click="onConfirm('Charges')">
              <span v-if="(Ddata)" style="font-weight:bold;">确认添加</span>
              <span v-else style="font-weight:bold;">确认修改</span>
            </el-button> 
            <el-button v-if="(Ddata)" type="danger"  plain size="mini" style="float:right" 
              @click="DetailedData = {};">重置</el-button>
            <el-button plain size="mini" style="float:right" 
              @click="SwitchingPoint = !(SwitchingPoint);">返回
            </el-button> 
          </el-card>
          <el-form ref="DetailedData" 
          :model="DetailedData" 
          :rules="rules" 
          label-position="right" 
          label-width="105px" 
          size="mini" 
          status-icon>
          <el-card style="width: 100%;height:100%;">
            <el-card>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="自定义编号" prop="SFXMBHZDY">
                    <el-input  v-model="DetailedData.SFXMBHZDY"></el-input>
                  </el-form-item>
                  <el-form-item label="名称" prop="SFXMMC">
                    <el-input  v-model="DetailedData.SFXMMC"></el-input>
                  </el-form-item>
                  <el-form-item label="单价" prop="SFXMDH">
                    <el-input  v-model="DetailedData.SFXMDH"><template slot="append">{{DetailedData.SFXMJJDW}}</template></el-input><!-- ￥ -->
                  </el-form-item>
                  <el-form-item label="计价单位" prop="SFXMJJDW">
                    <el-input  v-model="DetailedData.SFXMJJDW"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="有效否" prop="SFXMYXF">
                    <el-switch
                      v-model="DetailedData.SFXMYXF"
                      :active-value="1"
                      :inactive-value="0"
                    >
                    </el-switch>
                  </el-form-item>
                  <el-form-item label="备注" prop="SFXMBZ">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 5}"
                      placeholder="请输入内容"
                      maxlength="50"
                      show-word-limit
                      v-model="DetailedData.SFXMBZ">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>    
          </el-card>
          </el-form>
        </el-dialog>
      </el-col>
    </el-col>
  </el-row>
</div>
</template>

<script>
import TablePanel from "@/components/basic/TablePanel";//一个简单的增删查改表格
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";//从表格列变换到表单的一些工具

//meta info
var Charges = "Charges"; // 表格名称
var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证
var curPageAttr = "CurrentPage";// 分页-当前页
var totalNumAttr = "TotalNum";// 分页-总数
var qParamAttr = "QueryParams";// 查询参数

// 采集器信息-列
var ChargesColumns = [
  {
    prop: "SFXMBH",
    label: "收费项目编号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "SFXMBHZDY",
    label: "自定义编号",
  },
  {
    prop: "SFXMMC",
    label: "名称",
  },
  {
    prop: "SFXMDH",
    label: "单价",
    outOfSearch:true,
  },
  {
    prop: "SFXMJJDW",
    label: "计价单位",
  },
  {
    prop: "SFXMBZ",
    label: "备注",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "SFXMYXF",
    label: "有效否",
    outOfSearch:true,
    hidden: true,
  },
];

//导入
var importField = [
  "收费项目编号",
  "自定义编号",
  "名称",
  "单价",
  "计价单位",
  "备注",
  "有效否",
];
//导出
var exportField = [
  "收费项目编号",
  "自定义编号",
  "名称",
  "单价",
  "计价单位",
  "备注",
  "有效否",
];

export default {
  name: "Charges",
  components: {
    "table-panel": TablePanel,
  },
  methods: {
    onSearching: function(tname, params) {//查询
      var me = this;
      let url = "/static/data/Charges.json";// /jcJsxxb   /static/data/Charges.json

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.results;
              // me[tname+totalNumAttr] = resp.data.data.length;

              me[tname+totalNumAttr] = resp.data.total;// 分页-总数
              this.pageSize = resp.data.limit;//每页数量
              me[tname+curPageAttr] = resp.data.offset;//起始页    results
            }
        });
      }
    },
    onCreate: function(tname) {// 新增
      var me = this;
      me[tname + dlgVisibleAttr] = true;
      me[tname + recordAttr] = formModelInitFromTable(me[tname + columnsAttr]);
      this.DetailedData = {};
      this.Ddata = true;
      this.SwitchingPoint = !(this.SwitchingPoint);
    },
    onEdit: function(tname, row) {// 编辑
      var me = this;
      me[tname + dlgVisibleAttr] = true;
      me[tname + recordAttr] = row;
      this.Ddata = false;
      this.SwitchingPoint = !(this.SwitchingPoint);
      this.DetailedData = row
    },
    onDelete: function(tname, row) {// 删除
      var me = this;
      me.$confirm("确定删除这条记录吗?", "提示", {
          type: "warning"
      }).then(() => {
          me.deleteRequest(`/api/Charges/${row.SFXMBH}`).then((resp)=>{
            if(resp.status == 200) {
              me.$message.success("删除成功!");
              me.onSearching(Charges,{});// 重新加载表格数据
            }else{
              me.$message.error('删除失败！');
            }
          });
      }).catch(() => {});
    },
    onDeleteAll:function(tname, row){//全部删除
      var me = this;
      me.$confirm("确定删除全部记录吗?", "提示", {
          type: "warning"
      }).then(() => {
          me.deleteRequest(`/api`).then((resp)=>{
            if(resp.status == 200) {
              me.$message.success("删除成功!");
              me.onSearching(Charges,{});// 重新加载表格数据
            }else{
              me.$message.error('删除失败！');
            }
          });
      }).catch(() => {});
    },
    onSelectionChange: function(tname, data) {// 选中改变
      var me = this;
      // 缓存记录，按照编号，查询对应的选中权限节点数组
      me[tname + selectionAttr] = data;
    },
    onExport: function(tableName, params) {// 导出
      var me = this;
      const h = me.$createElement;
      me.$notify.info({
        title: "提示",
        message: h("i", { style: "color: teal" }, "正在导出数据，请稍等……")
      });
      me.exportRequest("/sbxxgl/export", {
        fields: JSON.stringify(exportField),//exportField
        sfbf: false
      }).then(resp => {
        if (resp.status === 200) {
          me.$notify.success({
            title: "提示",
            message: h("i", { style: "color: #67C23A" }, "数据导出成功")
          });
          downExcel(resp);
        } else {
          me.$notify.success({
            title: "提示",
            message: h("i", { style: "color: #F56C6C" }, "数据导出失败")
          });
        }
      });
    },
    onUpload:function(msg,flag){//导入
      var me = this;
      if(flag){
        me.currentPage = 1;
        me.onSearching('sbxxgl',{page:me.currentPage,size:me.pageSize});
      }
    },
    onDownTemplate:function(tableName,params){//模板下载
      var me = this;
      const h = me.$createElement;
      me.$notify.info({
        title: '提示',
        message: h('i', { style: 'color: teal'}, '正在下载模板，请稍等……')
      });
      me.downFileRequest('/excelTemplate/收费项目基本信息.xlsx').then(resp=>{
        me.$notify.success({
          title: '提示',
          message: h('i', { style: 'color: #67C23A'}, '模板下载成功')
        });
          fileDownload(resp.data,"收费项目基本信息.xlsx");
      });
    },
    onPageChange:function(tname,page){// 分页改变
      var me = this;
      let url = "/jcJsxxb";// /jcJsxxb

      if(url !== ""){
        me[tname+curPageAttr] = page;
        me[tname+qParamAttr]["page"] = page;
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.data;
              me[tname+totalNumAttr] = resp.data.data.length;
            }
        });
      }

    },
    onConfirm: function(tname) {// 对话框-确认
      let me = this;
      // 发送请求 /jcJsxxb

      if(me[Charges + recordAttr].SFXMBH == ""){

        me.$confirm("确定新增记录吗?", "提示", {
          type: "warning"
        }).then(() => {
          me.postRequest("/api/Charges",me[Charges + recordAttr]).then(resp => {
            if (resp.status == 200) {
              me.$message.success("提交成功！");

              //最后，隐藏对话框
              me[tname + dlgVisibleAttr] = false;
              this.SwitchingPoint = !(this.SwitchingPoint);
              me.onSearching(Charges, {});// 重新查一遍
            } else {
              me.$message.error("服务器发生错误，代码：" + resp.status);
            }
          });
        }).catch(() => {});
      }else{

        me.$confirm("确定修改记录吗?", "提示", {
          type: "warning"
        }).then(() => {
          me.postRequest("/api/VideoModify",me[Charges + recordAttr]).then(resp => {
            if (resp.status == 200) {
              me.$message.success("提交成功！");

              //最后，隐藏对话框
              me[tname + dlgVisibleAttr] = false;
              this.SwitchingPoint = !(this.SwitchingPoint);
              me.onSearching(Charges, {});// 重新查一遍
            } else {
              me.$message.error("服务器发生错误，代码：" + resp.status);
            }
          });
        }).catch(() => {});
      }
    },
  },
  data() {
    return {
      authorities:{
        create:true,
        DeleteAll:true,
        delete:true,
        edit:true,
        search:true,
        export:true,
        Import:true,
        DownTemplate:true,
      },// 权限控制
      [Charges + columnsAttr]: ChargesColumns, // 表格-列
      [Charges + dataAttr]: [], // 表格的数据
      [Charges + selectionAttr]: [], // 当前选中
      [Charges + dlgVisibleAttr]: false, // 对话框是否可见
      [Charges + recordAttr]: {}, // 表单模型
      [Charges + rulesAttr]: {},// 表单验证
      [Charges + curPageAttr]:1,// 当前页
      [Charges + totalNumAttr]:0,// 总数
      [Charges + qParamAttr]:{},// 查询参数
      pageSize:20,// 每页数量

      importField:importField.join(","),//导入的字段

      SwitchingPoint:false,//表单列表之间-切换控制

      DetailedData:{},//存储表单中的数据

      Ddata:true,//控制表单头标题的显示内容

      actionUrl:"/sbxxgl/import",//导入的路径

      rules: {
          SFXMBHZDY: [
            { required: true, message: '请输入收费项目自定义编号', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          SFXMMC: [
            { required: true, message: '请输入收费项目名称', trigger: 'blur' },
            { min: 1, max: 50, message: '长度最大为50个字符', trigger: 'blur' }
          ],
          SFXMDH: [
            { required: true, message: '请输入收费项目单价', trigger: 'blur' },
          ],
          SFXMJJDW: [
            { required: true, message: '请输入收费项目计价单位', trigger: 'blur' },
            { min: 1, max: 10, message: '长度最大为10个字符', trigger: 'blur' }
          ],
          SFXMBZ: [
            { required: true, message: '请输入收费项目备注', trigger: 'blur' },
            { min: 1, max: 50, message: '备注最长为50个字符', trigger: 'blur' }
          ]
        }
    };
  },
  created: function() {
    var me = this;
    // 添加权限控制
    // me.authorities = me.$route.meta.authorities;

    // 表单模型初始化
    me[Charges + recordAttr] = formModelInitFromTable(me[Charges + columnsAttr]);
    // 表单验证初始化
    me[Charges + rulesAttr] = formRulesInitFromTable(me[Charges + columnsAttr]);

    
    me.onSearching(Charges, {});// 重新查一遍

  }
};
</script>

<style lang="scss">
.module-basic-Charges {
  height: 100%;
}
</style>